<template>
<div> 
       <div class="button-action">
        <el-radio-group v-model="collect" size="mini" @change="onCollectChange">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button size="mini"
         @click="dialogVisible = true" 
         type="success"
         v-if="isShow"
          >添加素材</el-button
        >
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <el-col
          :xs="12"
          :sm="6"
          :md="6"
          :lg="4"
          v-for="(img, index) in images"
          :key="index"
          class="item"
           @click.native="selected = index"
        >
        <!-- 点击的时候直接传值 -->
          <el-image style="height: 100px"
           :src="img.url" 
           fit="cover"
           >
          </el-image>
          <div class="selected"
           v-if="isSelected&&selected === index"
           ></div>
          <div class="collect-box" v-if="isShow">
            <el-button
              type="warning"
              class="button"
              :icon="img.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'"
              size="mini"
              :loading="img.loadingAction"
              @click="onCollect(img)"
              circle
            ></el-button>
            <!-- <i :class="{
               'el-icon-star-on' : img.is_collected,
               'el-icon-star-off' : !img.is_collected
             }"
             @click="onCollect(img)"
             ></i> -->
            <i class="el-icon-delete"></i>
          </div>
        </el-col>
      </el-row>

      <!-- /素材列表 -->

      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="onPageChange"
        :current-page.sync="pageNumber"
      >
      </el-pagination>

       <!-- 对话框 -->
    <el-dialog
      title="上传素材"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="30%"
    >
      <!-- upload组件本人神支持请求提交上传操作 请求方式默认是POST 请求路径action 必须写完整的路径 -->
      <el-upload
        class="upload-demo"
        drag
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="uploadHeaders"
        :on-success="onUploadSuccess"
        multiple
        name="iamge"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
</div>
</template>
<script>
import { getImages, collectImage } from "@/api/image";
export default {
  name: 'imageManage',
  components: {},
  props: {
    isShow:{
      type: Boolean,//
      default: true//默认值
    },
    isSelected:{//是否展示
      type: Boolean,
      default: false//默认值
    }

  },
  data () {
      const user = JSON.parse(window.localStorage.getItem("user"));
    return {
      collect: false,
      images: [],
      dialogVisible: false,
      uploadHeaders: {
        Authorization: `Bearer ${user.token}`,
      },
      total: 0,
      pageSize: 10,
      pageNumber: 1,
      selected:null //选中的索引
    };
  },
  coumputed: {},
  watch: {},
  created () {
     this.loadImages(1);
  },
  mounted () {},
  methods: {
     loadImages(page) {
      this.pageNumber = page;
      getImages({
        collect: this.collect,
        page,
        per_page: this.pageSize,
      }).then((res) => {
        //手动的往返回来的结果集里面添加一个属性
        const result = res.data.data.results;
        result.forEach((img) => {
          img.loadingAction = false;
        });

        // total在后台已经有了 就不需要results.length了
        // this.total = Math.ceil(res.data.data.total_count/this.pageSize)
        this.total = res.data.data.total_count;
        this.images = res.data.data.results;

        //这里让刷新一次的列表 让之前选中的 对勾 消失
        this.selected = null
      });
    },
    onCollectChange() {
      this.loadImages(1);
    },
    onUploadSuccess() {
      //上传成功关闭 遮罩
      this.dialogVisible = false;

      //刷新一次界面
      this.loadImages();
    },
    onPageChange(page) {
      this.loadImages(page);
    },
    onCollect(img) {
      //收藏的时候
      img.loadingAction = true;
      collectImage(img.id, !img.is_collected).then((res) => {
        img.is_collected = !img.is_collected;
        //完成之后
        img.loadingAction = false;
      });
    },
  }
}
</script>
<style lang="less" scoped>
.button-action {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.item {
  position: relative;
}
.collect-box {
  height: 25px;
  background-color: #cccccc;
  color: #fff;
  opacity: 0.5;
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  font-size: 18px;
  display: flex;
  justify-content: space-around;
}
  .selected{
    background: url(./selected.png) no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    text-align: center;
  }
</style>
